<template>
  <nav-bar>
    <template v-slot:default>用户登录</template>
  </nav-bar>
  <div class="container">
    <!--form表单容器-->
    <div class="forms-container">
      <el-form
        :model="form"
        ref="lbLogin"
        label-width="80px"
        :rules="rules"
        class="loginForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名..."
          ></el-input>
        </el-form-item>
        <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码..."
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            class="submit-btn"
            @click="onSubmit('lbLogin')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <!--找加密码-->
      <div class="tiparea">
        <p>
          忘记密码？<a href="#">立即找回</a>&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="/register">注册</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
// import axios from "axios";
import { login } from "@/api/login";
import NavBar from "../../components/common/navbar/NavBar.vue";
export default {
  components: {
    NavBar,
  },
  setup() {
    const state = reactive({
      form: {
        username: "",
        password: "",
      },
      rules: {
        // 校验规则
        username: [
          {
            required: true, // 表单不能为空
            message: "请输入用户名", // 验证错误，在页面上显示的错误信息
            trigger: "blur", // 失去焦点时触发
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
    });
    const router = useRouter();
    const { ctx } = getCurrentInstance();
    // const router = useRouter();
    // 用户单击提交按钮的触发方法
    const onSubmit = (formName) => {
      ctx.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(state.form);
          await login(state.form)
            .then((res) => {
              // console.log(res.data.id);
              if (res.data) {
                // 返回true或者false
                localStorage.setItem("userName", state.form.username);
                localStorage.setItem("userID", res.data.id);
                ElMessage({
                  message: "登录成功！",
                  center: true,
                  type: "success",
                  offset: 100,
                  showClose: true,
                  duration: 5000,
                });
                router.push("/home");
              } else {
                ElMessage({
                  message: "用户名和密码错误，重新输入",
                  center: true,
                  type: "error",
                  offset: 100,
                  showClose: true,
                  duration: 5000,
                });
              }
            })
            .catch((error) => {
              window.console.log("失败" + error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    return {
      ...toRefs(state),
      onSubmit,
    };
  },
};
</script>

<style scoped>
.logo {
  width: 70%;
  margin-top: 75px;
}
.container {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 300px;
  overflow: hidden;
}
.forms-container {
  width: 100%;
  margin: 50px auto;
  padding: 20px;
  /* border:1px solid #dcdfe6;
  border-radius: 6px;
  box-shadow: 5px 5px 30px #dcdfe6; */
}
.login-title {
  text-align: center;
  font-weight: bolder;
  margin-bottom: 30px;
}
.submit-btn {
  width: 100%;
}
.tiparea {
  text-align: right;
  font-size: 14px;
  color: #333;
}
.tiparea p a {
  color: #409eff;
  text-decoration: none;
}
</style>
